import React from 'react'
import { allOrders, getOrder, acceptOrder, getShopOrders } from '../../api/business'
import AppBar from '../../components/AppBar';
import { CommodityList } from '../../components/OrderItem'

export class OrdersPage extends React.Component {
    constructor(props) {
        super(props)
        let param = props.match.params.id
        this.state = {
            param: param,
            data: []
        }
    }

    componentDidMount() {
        if (this.state.param === 'all') {
            allOrders((data) => {
                this.setState({
                    data: data
                })
            })
        } else {
            getShopOrders(this.state.param, (data) => {
                this.setState({
                    data: [data]
                })
            })
        }
    }

    render() {
        let panels = this.state.data.map(shop => {
            return (
                <OrderList data={shop} show={this.state.param === 'all' ? '' : ' show'} />
            )
        })
        return (
            <>
                <AppBar />
                <div className="container" style={{ padding: '15px 0' }}>
                    {panels}
                </div>
            </>
        )
    }
}


const OrderList = (props) => {
    let toHandleOrders = []
    let handledOrders = []
    props.data.orders.forEach(order => {
        if (order.payTime == 0 || order.cancelTime != 0) {

        } else {
            if (order.acceptTime == 0) {
                toHandleOrders.push(
                    <li className="list-group-item" key={"order-" + order.id}>
                        <OrderCard order={order} />
                    </li>
                )
            } else {
                handledOrders.push(
                    <li className="list-group-item" key={"order-" + order.id}>
                        <OrderCard order={order} />
                    </li>
                )
            }
        }

    })
    return (
        <>
            <button className="btn btn-block" data-toggle="collapse" data-target={"#shop-orders-" + props.data.shopId}>{props.data.shopName}</button>
            <hr></hr>
            <div id={"shop-orders-" + props.data.shopId} className={"collapse" + props.show}>
                <div className="card">
                    <div className="card-header">
                        <a data-toggle="collapse" data-parent={"#shop-orders-" + props.data.shopId} href={"#shop-th-" + props.data.shopId}>待接订单</a>
                    </div>
                    <div id={"shop-th-" + props.data.shopId} className="card-body collapse show">
                        <ul className="list-group">
                            {toHandleOrders}
                        </ul>
                    </div>
                </div>
                <div className="card">
                    <div className="card-header">
                        <a data-toggle="collapse" data-parent={"#shop-orders-" + props.data.shopId} href={"#shop-hd-" + props.data.shopId}>已接订单</a>
                    </div>
                    <div id={"shop-hd-" + props.data.shopId} className="card-body collapse">
                        <ul className="list-group">
                            {handledOrders}
                        </ul>
                    </div>
                </div>
            </div>
        </>
    )
}


export const OrderCard = (props) => {

    const accept = (id) => {
        acceptOrder(id)
    }

    let badge = '';
    let order = props.order;
    let operation = (
        <button
            type="button"
            className="btn btn-light"
            style={{ minWidth: '200px' }}
        >
            无可用操作
        </button>
    );

    if (order.cancelTime != 0) {
        badge = <span className="badge badge-secondary">已取消</span>
    } else if (order.payTime == 0) {
        return '';
    } else if (order.acceptTime == 0) {
        badge = <span className="badge badge-info">待商家接单</span>
        operation = (
            <button
                type="button"
                className="btn btn-danger"
                style={{ minWidth: '200px' }}
                onClick={() => { accept(order.id) }}
            >
                接单
        </button>
        );
    } else if (order.delivererArriveTime == 0) {
        badge = <span className="badge badge-warning">商家已接单</span>
    } else if (order.delivererTakeTime == 0) {
        badge = <span className="badge badge-warning">骑手已接单</span>
    } else if (order.deliverTime == 0) {
        badge = <span className="badge badge-warning">骑手到达商家</span>
    } else if (order.receiveTime == 0) {
        badge = <span className="badge badge-danger">骑手正在送货</span>
    } else {
        badge = <span className="badge badge-success">订单已完成</span>
    }

    return (
        <>
            <CommodityList
                cart={JSON.parse(order.commodity)}
                shop={{
                    name: order.shopName,
                    shipPrice: order.shipPrice
                }}
                badge={badge}
            />
            <div style={{ textAlign: 'right', margin: '15px 0' }}>
                {operation}
            </div>
        </>
    )
}
